<template>
	<div class="userlist">
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px">
			<el-form :inline="true" :model="filters">
				<el-form-item label="姓名:">
					<el-input
						v-model="filters.name"
						placeholder="姓名"
					></el-input>
				</el-form-item>
				<el-form-item label="时间:">
					<el-col :span="11">
						<el-date-picker
							v-model="filters.starttime"
							type="datetime"
							placeholder="选择开始日期时间"
							value-format="yyyy-MM-dd hh:mm:ss"
						></el-date-picker>
					</el-col>
					<el-col class="line" :span="2">-</el-col>
					<el-col :span="11">
						<el-date-picker
							v-model="filters.endtime"
							type="datetime"
							placeholder="选择结束日期时间"
							value-format="yyyy-MM-dd hh:mm:ss"
						></el-date-picker>
					</el-col>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						style="margin: 0 10px"
						@click="findLog"
						icon="el-icon-search"
						size="mini"
						>查询</el-button
					>
				</el-form-item>
				<el-form-item>
					<el-button
						type="success"
						icon="el-icon-arrow-left"
						size="mini"
						@click="onExporExcel"
						>导出数据</el-button
					>
				</el-form-item>
			</el-form>
		</el-col>

		<el-table
			id="tableLog"
			:data="logLists"
			stripe
			border
			@selection-change="handleSelectionChange"
			v-loading="listLoading"
			height="650px"
		>
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column
				prop="username"
				label="姓名"
				width="80"
				sortable
			></el-table-column>
			<el-table-column
				prop="nick"
				label="昵称"
				width="80"
				sortable
			></el-table-column>

			<el-table-column label="内容">
				<template v-slot="scope">
					<el-collapse>
						<el-collapse-item :title="filterContent(scope.row.content)">
							<!-- content -->
							<span
								v-html="scope.row.content"
								v-if="scope.row.category == 0"
							></span>

							<mavon-editor
								v-else
								:value="scope.row.content"
								:subfield="prop.subfield"
								:defaultOpen="prop.defaultOpen"
								:toolbarsFlag="prop.toolbarsFlag"
								:editable="prop.editable"
								:scrollStyle="prop.scrollStyle"
								style="
									box-shadow: none;
									background-color: #fbfbfb;
								"
							>
							</mavon-editor>
							<!-- 日志回复 -->
							<hr
								style="
									background-color: #ebeef5;
									height: 1px;
									border: none;
								"
							/>
							<a
								href="javascript:void(0)"
								@click="onReply(scope.row.l_id)"
								class="replay"
								v-permision="['ReplyLog']"
								>回复</a
							>
							<LogReply
								v-for="item in scope.row.logList"
								:key="item.id"
								:replyItem="item"
								:logId="scope.row.l_id"
							></LogReply>
						</el-collapse-item>
					</el-collapse>
				</template>
			</el-table-column>

			<el-table-column
				prop="logtime"
				label="日期"
				:formatter="dateFormat"
				sortable
				width="200"
			></el-table-column>

			<el-table-column label="操作" width="200">
				<template v-slot="scope">
					<el-button
						@click="onDelete(scope.row.l_id)"
						type="primary"
						icon="el-icon-delete"
						size="small"
						v-permision="['RemoveLog']"
						>删除</el-button
					>
					<el-button
						@click="onEditLog(scope.row.l_id)"
						type="success"
						icon="el-icon-edit"
						size="small"
						v-permision="['EditLog']"
						>编辑</el-button
					>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar" style="margin-top: 10px">
			<el-button
				type="danger"
				:disabled="this.multipleSelection.length === 0"
				size="small"
				>批量删除</el-button
			>
			<!-- 分页组件 -->
			<el-pagination
				background
				layout="total,sizes,prev, pager, next,jumper"
				:total="logPagers.total"
				:current-page.sync="logPagers.currentNo"
				:page-size="logPagers.pageSize"
				:page-sizes="[5, 10, 20, 30, 50]"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
				style="float: right"
			></el-pagination>
		</el-col>

		<!--编辑界面-->
		<el-dialog
			title="编辑"
			:visible.sync="editFormVisible"
			:close-on-click-modal="false"
		>
			<mavon-editor
				v-if="category == 1"
				v-model="content"
				style="margin-top: 5px"
			></mavon-editor>
			<el-card style="height: 500px" v-else>
				<quill-editor
					v-model="content"
					ref="myQuillEditor"
					style="height: 400px"
				></quill-editor>
			</el-card>
			<el-button @click="saveHtml" type="primary" style="margin: 10px 0"
				>保存</el-button
			>
		</el-dialog>
	</div>
</template>

<script>
import {export_table_to_excel} from '@/vendor/Export2Excel'
import {
	RequestLogListPage,
	RequestLogFind,
	RequestLogUpdate,
	RequestLogDelete
} from '@/api/LogApi.js'
import { RequestLogReplyAdd } from '@/api/LogReply.js'

import util from '@/utils/DataUtil.js'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import LogReply from '@/components/LogReply.vue'
export default {
	components: {
		quillEditor,
		LogReply
	},
	data() {
		return {
			logLists: [
				// { l_id: 1, content: "qq", logtime: "123"},
			],
			multipleSelection: [],
			logPagers: {
				total: 0,
				pageSize: 5, //默认5条记录，服务器控制
				pageCount: 0,
				currentNo: 1
			},
			listLoading: false,
			content: null,
			logId: null,
			editFormVisible: false,
			filters: {
				name: null,
				starttime: null,
				endtime: null
			},
			username: null,
			// 日志回复
			logReplyList: [
				{
					id: 1,
					message:
						'收到消息，按计划进行收到消息，按计划进行收到消息，按计划进行收到消息，按计划进行收到消息，按计划进行收到消息，按计划进行收到消息，按计划进行',
					reply_time: '2020-02-21T08:42:05.000Z',
					nick: '周sir',
					username: 'zhousir',
					headerimg: '/upload/fileHeader-1594901016742.jpg'
				}
			],
			// 文本框类型
			category: 0
		}
	},
	computed: {
		prop() {
			let data = {
				subfield: false, // 单双栏模式
				defaultOpen: 'preview', //edit： 默认展示编辑区域 ， preview： 默认展示预览区域
				editable: false,
				toolbarsFlag: false,
				scrollStyle: true
			}
			return data
		}
	},
	created() {
		let user = this.$store.getters.user
		this.username = user.username
		this.onRequestLogList()
	},

	methods: {
		/**
		 * 导出日志
		 */
		onExporExcel(){
			export_table_to_excel('tableLog')

		},
		// 日志回复
		onReply(logId) {
			this.$prompt('请输入回复内容', {
				confirmButtonText: '确定',
				cancelButtonText: '取消'
			}).then(({ value }) => {
				RequestLogReplyAdd(
					value,
					logId,
					this.$store.getters.user.m_id
				).then(data => {
					if (data.resultCode == 1) {
						this.onRequestLogList()
					}
				})
			})
		},
		/**
		 * 请求用户列表数据
		 */
		onRequestLogList() {
			const that = this
			this.listLoading = true
			RequestLogListPage(
				this.logPagers.currentNo,
				this.logPagers.pageSize,
				this.username,
				this.filters.name,
				this.filters.starttime,
				this.filters.endtime
			)
				.then(data => {
					if (data.resultCode == 1) {
						this.listLoading = false
						this.logLists = data.resultInfo.list
						this.logPagers.total = data.resultInfo.total
						this.logPagers.pageCount = data.resultInfo.totalNum
					} else {
						this.listLoading = false
						this.logLists = []
					}
				})
				.catch(err => {
					this.listLoading = false
					this.$message({
						message: '请求出错！' + err,
						type: 'error'
					})
				})
		},
		onDelete(id) {
			const that = this
			this.$confirm('是否删除该条数据?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				RequestLogDelete(id).then(data => {
					if (data.resultCode == 1) {
						that.$message({
							message: '删除成功',
							type: 'success'
						})
						that.onRequestLogList() //重新加载用户列表
					}
				})
			})
		},

		/**
		 * 多选触发事件 @selection-change
		 */
		handleSelectionChange(val) {
			this.multipleSelection = val
			this.multipleSelection.forEach(item => {})
		},
		/**
		 * 分页事件
		 */
		handleCurrentChange(val) {
			this.logPagers.currentNo = val
			this.onRequestLogList()
		},
		// 页大小转变事件
		handleSizeChange(val) {
			this.logPagers.pageSize = val
			this.onRequestLogList()
		},
		//时间格式化
		dateFormat(row, column) {
			const daterc = row[column.property]
			if (daterc != null) {
				return util.formatDate.format(
					new Date(daterc),
					'yyyy-MM-dd hh:mm:ss'
				)
			}
		},
		//编辑日志
		onEditLog(id) {
			this.logId = id
			RequestLogFind(id).then(data => {
				if (data.resultCode == 1) {
					this.content = data.resultInfo.content
					this.category = data.resultInfo.category
					this.editFormVisible = true
				} else {
					this.$message({
						message: data.resultInfo,
						type: 'error'
					})
				}
			})
		},
		saveHtml() {
			RequestLogUpdate(this.logId, this.content).then(data => {
				if (data.resultCode == 1) {
					this.$message({
						message: '修改成功!',
						type: 'success'
					})
					this.editFormVisible = false
					this.onRequestLogList()
				}
			})
		},
		findLog() {
			this.onRequestLogList()
		},
		/**
		 * 日志内容
		 * 去掉
		 */
		filterContent(content) {
			let str = content.replace(/<.*?>/g, '').substring(0,50)
			var reg = /[\\\`\*\_\[\]\#\+\-\!\>]/g;
			return str.replace(reg,'')
		}
	}
}
</script>

<style lang="scss" scoped>
.replay {
	display: block;
	text-align: right;
	font-size: 12px;
	color: #94969b;
	&:hover {
		text-decoration: underline;
	}
}
</style>
